<template>
  <!-- 树形数据渲染
       1：定义api
       2:导入api
       3:进入页面就调用
       4：存储并渲染
       父子组件传值
       父传子
          传
            子组件标签 属性名=“值”

          收
            props:{
              属性名:{
                type:类型,
                default:默认值（基本数据类型：直接写，复杂数据类型：()=>复杂数据类型的值）,
                    例子：default:()=>new Date()
                required:true// 必传
                validator:(value)=>{
                  value:就是传入的值
                  return boolean值  true:通过  false:不通过
                }
              }
            }
            特性：单向数据流
                   基本数据子组件不能修改
                   复杂数据类型：不要修改它的引用地址（栈），它的堆随便修改

        兄弟组件传值
        1：Vue.prototype.$bus=new Vue()
        2: 监听  this.$bus.$on('event',(参数1，参数2)=>{})
        3：触发  this.$bus.$emit('event',实参1,实参2)
        4：销毁  this.$bus.$off('event')

        删除：
         1：点击删除弹出确定框
         2：点击了确定调用接口删除
            定义删除api
            导入删除api
            点击确定后调用删除api
         3:删除完成
            提示
            更新父级列表数据
        编辑：
          1：点击编辑打开新增弹框
          2：在新增弹框内定义一个字段用于区分是新增还是编辑 mode="add/edit"
          3:点击编辑打开弹框时还需要修改该字段 （新增也要修改）
          4：标题调整
          5：表单数据要回显
          6：表单验证也需要根据场景调整
          7：调用编辑api(分场景调用)
              a:定义api
              b：导入
              c:分场景调用
              d：调用成功 ：提示，关闭弹框 ，刷新父级列表数据
 -->
  <div class="departments">
    <el-card>
      <div class="content">
        <TreeItem :item="topInfo" />
        <el-tree
          default-expand-all
          style="margin-top: 15px"
          :data="treeData"
          :props="{ label: 'name', childre: 'children' }"
        >
          <template v-slot="{ data }">
            <TreeItem :item="data" style="width: 100%" @getData="getData" />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- <Son /> -->
    <!-- 新增弹框组件 -->
    <Add :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment } from '@/api/departments'
import TreeItem from './components/treeItem.vue'
import Add from './components/add'
// import Son from './components/son'
export default {
  components: {
    TreeItem,
    Add
    // Son
  },
  data() {
    return {
      topInfo: {
        name: '传智教育',
        manager: '负责人',
        isTop: true,
        id: ''
      },
      initList: [], // 原始组织架构数据
      treeData: []
    }
  },
  beforeCreate() {
    // pid:代表自己父级的id
    const arr = [
      { name: '广东', id: '1', pid: '' },
      { name: '广西', id: '2', pid: '' },
      { name: '深圳', id: '3', pid: '1' },
      { name: '宝安', id: '4', pid: '3' }
    ]
    //
    /*
    树形数据转换
    1：找出第一层数据
    2:只想找出广东省的子集
    3：封装一个方法用于找子集
    4:递归调用
    */
    function getChildren(tempArr, pid) {
      return tempArr.filter((item) => {
        if (item.pid === pid) {
          item.children = getChildren(tempArr, item.id)
          return true
        }
      })
    }
    getChildren(arr, '')
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartment()
      this.initList = res.data.data.depts
      this.treeData = this.changeData(res.data.data.depts, '')
      // console.log(res)
    },
    // 树形数据转换
    changeData(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 15px;
  .content {
    padding: 30px 60px;
  }
}
</style>
